<template>
  <div class="total-device">
    <div class="total-device-left">
      <div id="total-device-chart">
        <vue-echarts :option="option"/>
      </div>
    </div>
    <div class="total-device-right">
      <div class="td-title-wrapper">
        <div class="total-device-right-left">
          <div class="title">登录设备</div>
          <div class="sub-title">Distribution of Internet devices</div>
        </div>
        <div class="total-device-right-right">
          <div class="td-age">
            <count-to
              :startVal="startNum"
              :endVal="num"
              :duration="1000"
            />
            <span class="td-age-unit">台</span>
          </div>
        </div>
      </div>
      <div class="td-average-data-wrapper">
        <div class="td-average-data" v-for="(item, index) in refData" :key="index">
          <div class="td-average-data-value">
            <count-to
              :startVal="item.startValue"
              :endVal="item.value"
              :duration="1000"
            />
          </div>
          <div class="td-average-data-axis">
            <div class="point" :style="{background: item.color}"/>
            <div class="text">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref, watch } from 'vue'

const color = ['rgb(176,207,120)', 'rgb(157,195,91)', 'rgb(131,167,72)']

export default {
  name: 'TotalDevice',
  props: {
    data: Object
  },
  setup (ctx) {
    const refData = ref([])
    const num = ref(0)
    const startNum = ref(0)
    const option = ref({})
    const updateChart = () => {
      option.value = {
        series: [{
          name: '设备总数',
          type: 'pie',
          data: refData.value,
          roseType: 'radius',
          label: {
            show: false
          },
          emphasis: {
            itemStyle: {
              color: 'rgb(140,251,182)'
            }
          },
          radius: '70%',
          clockwise: true,
          color,
          selectedMode: 'multiple',
          selectedOffset: 10
        }]
      }
    }

    const update = (newData) => {
      if (refData.value.length > 0) {
        refData.value = newData.devices.map((item, index) => ({
          startValue: refData.value[index].value,
          value: item.value,
          name: item.key,
          color: color[index]
        }))
      } else {
        refData.value = newData.devices.map((item, index) => ({
          startValue: 0,
          value: item.value,
          name: item.key,
          color: color[index]
        }))
      }
      startNum.value = num.value
      num.value = +newData.totalDevices
      updateChart()
    }

    watch(() => ctx.data, (newData) => {
      update(newData)
    })
    onMounted(() => {
      update(ctx.data)
    })

    return {
      refData,
      num,
      startNum,
      option
    }
  }
}
</script>

<style lang="scss" scoped>
.total-device {
  display: flex;
  width: 100%;
  height: 100%;
  background: rgb(43, 44, 46);

  .total-device-left {
    width: 30%;
    height: 100%;

    #total-device-chart {
      width: 100%;
      height: 100%;
    }
  }

  .total-device-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 10px 40px 0;

    .td-title-wrapper {
      display: flex;
      align-items: center;

      .total-device-right-left {
        .title {
          font-size: 32px;
        }

        .sub-title {
          font-size: 16px;
          margin-top: 10px;
        }
      }

      .total-device-right-right {
        flex: 1;
        margin-left: 40px;
        font-weight: bold;

        .td-age {
          font-size: 56px;
          font-family: DIN;

          .td-age-unit {
            font-size: 20px;
          }
        }
      }
    }

    .td-average-data-wrapper {
      display: flex;

      .td-average-data {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        font-weight: bolder;

        .td-average-data-value {
          width: 100%;
        }

        .td-average-data-axis {
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
